<script lang="ts" setup>
	import ProductSwiper from '@/views/product/ProductSwiper.vue'
	import ProductChildrenSwiper from '@/views/product/ProductChildrenSwiper.vue'
	import CaseSwiper from '@/views/product/CaseSwiper.vue'
	import utils from '@/utils'

	const sceneList = [{
		img: 'product/t7.png',
		title: '更稳定',
		text: '优秀的控制算法和高刚性设计，运动轨迹平稳柔顺，高精度保持',
	}, {
		img: 'product/t8.png',
		title: '更灵活',
		text: '±360°关节运动范围，球形工作空间，支持任意角度安装，本体超轻量化设计，小巧轻盈，结构紧凑',
	}, {
		img: 'product/t9.png',
		title: '更易用',
		text: '协作机器人优势支持拖拽示教，关节快换、示教轻松，编程简单，部署快捷，极大缩短集成周期',
	}, {
		img: 'product/t10.png',
		title: '更开放',
		text: '具备丰富的软硬件交互方式及多样化兼容拓展接口，支持多平台的二次开发，有效帮助用户实现多场景的应用',
	}, {
		img: 'product/t11.png',
		title: '更安全',
		text: '高灵敏度碰撞检测，无需安全围栏隔离；产品性能稳定，CS系列全系标配IP68',
	}, {
		img: 'product/t12.png',
		title: '更高效',
		text: '节拍优秀，高速高精，极大提高生产效率',
	}]
</script>

<template>
	<div class="content">
		<ProductSwiper />
		<div class="item item1">
			<div class="title">
				产品列表
			</div>
			<div class="text">
				多种产品，全方位覆盖各种生产环境
			</div>
			<div class="item1-box">
				<ProductChildrenSwiper />
			</div>
		</div>

		<div class="item item2">
			<div class="title">
				核心优势
			</div>
			<div class="text">
				更好的产品带来更好的体验，更多的优势
			</div>
			<div class="item2-list">
				<div v-for="(li, index) in sceneList" :key="index" class="li">
					<img :src="utils.getImg(li.img)" class="img">
					<div class="li-title">
						{{ li.title }}
					</div>
					<div class="li-text">
						{{ li.text }}
					</div>
				</div>
			</div>
		</div>
		<div class="item item3">
			<div class="title">
				产品案例
			</div>
			<div class="text">
				成熟的技术才能有更多用户选择
			</div>
			<div class="item3-list">
				<CaseSwiper />
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.content {
	}
	.item {
		width: 1280px;
		margin: 0 auto;
		padding: 80px 0;

		.title {
			font-size: 32px;
			font-weight: bold;
			text-align: center;
		}

		.text {
			margin-top: 25px;
			color: #495770;
			line-height: 25px;
			text-align: center;
		}
	}

	.item1 {
		width: 100%;

		.item1-box {
			margin-top: 40px;
		}
	}

	.item2 {
		user-select: none;

		.item2-list {
			margin-top: 20px;
			padding: 0 100px;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.li {
				margin: 20px 0;
				width: 300px;
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;

				.img {
					background-color: #1677ff;
					border-radius: 50%;
					padding: 10px;
					box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.1);
				}

				.li-title {
					font-size: 18px;
					font-weight: bold;
					margin-top: 25px;
				}

				.li-text {
					color: #495770;
					margin-top: 20px;
					line-height: 25px;
				}
			}
		}
	}

	.item3 {
		width: 1400px;

		.item3-list {
			margin-top: 40px;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	}
</style>